<template>
  <!-- 门诊挂号 -->
  <div id='register'>
    <el-row>
      <el-col :span="8">
        <h1 style="margin-left: 10px">患者信息填写：</h1>
      </el-col>
      <el-col :span="16">
        <h1 style="margin-left: 10px">挂号科室医生：</h1>
      </el-col>
    </el-row>
    <el-row class="mt">
      <el-col :span="8">
        <el-form 
          ref="form"
          :disabled="form.disabled"
          :model="form"
          label-width="80px"
        >
          <el-form-item label="患者姓名">
            <el-input
              size='small'
              v-model="form.name"
              placeholder="请输入患者姓名（必填）"
              class="charfull"
            />
            <el-button
              @click="opendialog()"
              size="small"
              type="primary"
              :disabled="dis"
              icon="el-icon-user-solid"
            ></el-button>
          </el-form-item>
          <el-form-item label="身份证号">
            <el-input
              class="charfull"
              type="text"
              :id="charf"
              v-model="form.idcard"
              placeholder='请填写身份证号（选填）'
              oninput="value=value.replace(/[^\d.x$]/g,'')"
            />
          </el-form-item>

          <el-form-item label="患者性别">
            <el-select v-model="form.sex" placeholder="请选择性别（必选）" class="charfull">
              <el-option label="男" value="1" />
              <el-option label="女" value="2" />
            </el-select>
          </el-form-item>

          <el-form-item label="患者生日">
            <el-input  :disabled='disbriday' type="date" class="charfull" v-model="form.age" />
          </el-form-item>
          <el-form-item label="手机号">
            <el-input
              class="el_php"
              v-model="form.php"
              placeholder="请输入手机号（必选）"
              style="width:200px"
              oninput="value=value.replace(/[^\d.]/g,'')"
            />
          </el-form-item>
          <el-form-item label="地址">
            <el-input
               class="charfull"
              v-model="form.address"
              type="textarea"
              placeholder="请输入地址（选填）"
            />
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="make" style="margin-left: 79px"
          >立即预约</el-button
        >
        <el-button icon="el-icon-refresh" @click="Reset()">重置</el-button>
      </el-col>
      <el-col :span="16">
        <el-table
          height="490"
          :data="
            schedlist.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )
          "
          :header-cell-style="{
            backgroundColor: '#eef5ff',
            textAlign: 'center',
          }"
          :cell-style="{ textAlign: 'center' }"
        >
          <el-table-column label="单选">
            <template slot-scope="scope">
              <el-radio
                class="radio"
                v-model="templateSelection"
                :label="scope.row"
                >&nbsp;</el-radio
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="date"
            label="日期"
            width="110"
          ></el-table-column>
          <el-table-column prop="subsectionType" label="时段">
            <template slot-scope="sc">
              <i v-if="sc.row.subsectionType == 1">上午</i>
              <i v-if="sc.row.subsectionType == 2">下午</i>
              <i v-if="sc.row.subsectionType == 3">晚上</i>
            </template>
          </el-table-column>
          <el-table-column prop="trueName" label="医生姓名"></el-table-column>
          <el-table-column prop="departmentName" label="科室"></el-table-column>
          <el-table-column prop="registeredfeeName" label="挂号类型"></el-table-column>
          <el-table-column
            prop="registeredfeeFee"
            label="挂号费"
          ></el-table-column>
          <el-table-column
            prop="registeredfeeSubFee"
            label="病例费"
          ></el-table-column>
          <el-table-column
            prop="registeredfeeAggregateAmount"
            label="挂号总费用"
          ></el-table-column>
        </el-table>
        <div class="mt">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="schedlist.length"
          >
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    <!--快速选定患者信息对话框 -->
    <el-dialog title="患者选定" :visible.sync="dialogVisible">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="患者库" name="first">
          <el-row style="margin-top: 10px">
            <el-col :span="23" style="margin-left: 10px">
              姓名：<el-input
                v-model="name"
                placeholder="请填写姓名"
                class="selectall"
              />
              手机号码：<el-input
                v-model="php"
                placeholder="请填写手机号"
                class="selectall"
              />
              <el-button type="primary" @click="selectBynameAndphp()"
                >查询</el-button
              >
            </el-col>
          </el-row>
          <el-table
            height="300"
            style="margin-top: 20px"
            :data="patientlist"
            :header-cell-style="{
              backgroundColor: '#eef5ff',
              textAlign: 'center',
            }"
            :cell-style="{ textAlign: 'center' }"
          >
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="mobile" label="手机号" />
            <el-table-column label="生日" >
            <template slot-scope="sc">
                {{sc.row.birthday==null||sc.row.birthday==''?'未设置':sc.row.birthday}}
            </template>
            </el-table-column>
            <el-table-column  label="身份证号" >
               <template slot-scope="sc">
                {{sc.row.idCard==null||sc.row.idCard==''?'未设置':sc.row.idCard}}
            </template>
            </el-table-column>
            <el-table-column prop="address" label="地址" />
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="primary" @click="visit(scope.row)"
                  >选定</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="历史病例" name="second">
          <el-row >
            <el-col :span="24" style="margin-top:10px;margin-left:10px">
                  姓名：<el-input
                v-model="bl.name"
                placeholder="请填写姓名"
                class="selectall"
              />
              科室名称：<el-input
                v-model="bl.ks"
                placeholder="请填写手机号"
                class="selectall"
              />
              <el-button type="primary" @click="selectBynameAndks()"
                >查询</el-button
              >
            </el-col>
          </el-row>
            <el-table :data="historys" height='300' class='mt'  :header-cell-style="{
              backgroundColor: '#eef5ff',
              textAlign: 'center',
            }"
            :cell-style="{ textAlign: 'center' }">
              <el-table-column prop='name' label="患者姓名"></el-table-column>
              <el-table-column prop='departmentName' label="科室"></el-table-column>
              <el-table-column prop='trueName' label="就诊医生"></el-table-column>
              <el-table-column prop='typeId' label="就诊类型">
                <template slot-scope="sc">
                  <b v-if='sc.row.typeId==0'>初诊</b>
                  <b v-if='sc.row.typeId==1'>复诊</b>
                  <b v-if='sc.row.typeId==2'>急诊</b>
                </template>
              </el-table-column>
              <el-table-column prop='addtime' label="就诊时间"></el-table-column>
               <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="primary" @click="visit(scope.row)"
                  >选定</el-button
                >
              </template>
            </el-table-column>
            </el-table>

        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <!-- 稍后支付还是现在支付 -->
    <el-dialog title="支付提示" :visible.sync="dialogVisible1" width="30%">
      <span>是否现在支付费用?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="make1(5)">稍后支付</el-button>
        <el-button type="primary" @click="make1(1)">现在支付</el-button>
      </span>
    </el-dialog>
    <!-- 侧边框 -->
    <el-drawer title="支付" :visible.sync="drawer" :with-header="false">
      <span>
        <h2 style="text-align: center; margin-top: 30px">请扫码支付</h2>
        <img class="img" src="../../assets/wx.jpg" />
        <el-button @click="paysuccess" type="success" style="margin-left: 180px"
          >付款成功！</el-button
        >
      </span>
    </el-drawer>
  </div>
</template>

<script>
import { loading,Sloading} from "../../api/doctor/tools/loading";
import {
  getAllSchedulingByNow,
  getPatientList,
  getPatientListBynameAndphp,
  FristRegisterLastPay,
  FristPayLastRegister,
  getAllHistory
} from "../../api/doctor/register";
import { open2, open3,open4 } from "../../api/doctor/tools/alert";

export default {
  name: "Register",
  data() {
    return {
      bl:{
        name:'',
        ks:""
      },
      //病例集合
      historys:[],
      //检测,
      charf:"charfull",
      //测边框
      drawer: false,
      //单选选中
      templateSelection: "",
      dis: false,
      disbriday:false,
      //模糊查询
      name: "",
      php: "",
      //患者信息
      form: {
        disabled: false,
        patientId: "",
        idcard: "",
        name: "",
        sex: "",
        age: "",
        php: "",
        address: "",
        //附加字段
        did: "",
        id: "",
        regId: "",
        registeredfeeAggregateAmount: "",
        schedulingId: "",
        schedulingSubsectionId: "",
        schedulingWeekId: "",
        //区分是否支付
        pay:0
      },
      //患者列表
      patientlist: [],
      //对话框默认
      activeName: "first",
      dialogVisible: false,
      dialogVisible1: false,
      //可预约排版列表
      schedlist: [],
      //分页=当前页
      currentPage: 1,
      pageSize: 9,
    };
  },
  methods: {
    // 动态赋值
    visit(e) {
      this.form.name = e.name;
      this.form.age = e.birthday;

      if (e.sex === 1) {
        this.form.sex = "男";
      } else {
        this.form.sex = "女";
      }
      this.form.idcard=e.idCard
      this.form.php = e.mobile;
      this.form.address = e.address;
      this.form.disabled = true;
      this.dialogVisible = false;
      this.form.patientId = e.patientId;
    },
    // 模糊查询
    selectBynameAndphp() {
      const formdata = new FormData();
      formdata.append("name", this.name);
      formdata.append("php", this.php);
      getPatientListBynameAndphp(formdata).then((re) => {
        this.patientlist = re.data;
      });
    },
    //打开对话框
    opendialog() {
      this.dialogVisible = true;
    },
    //打开现在支付/稍后支付
    make() {
      if (this.form.disabled) {
        // 跳过验证
      } else {
        // 验证合法
        if (this.form.name === "") {
          open3(this, "姓名不能为空");
          return;
        }
        if (this.form.sex === "") {
          open3(this, "性别不能为空");
          return;
        }
         if (this.form.age === '') {
          open3(this, "生日不能为空");
          return;
        }
        if (this.form.php === "") {
          open3(this, "手机号不能为空");
          return;
        }

        if(this.form.idcard!=''){
            const areg = /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
            if(!areg.test(this.form.idcard)){
                open3(this, "身份证号不合法");
                  return;
            }
        }

        const reg = /^1[345789]\d{9}$/
        if(!reg.test(this.form.php)){
           open3(this, "手机号不合法");
          return;
        }


      }
      if (this.templateSelection == "") {
        open3(this, "请选择挂号");
        return;
      }
      this.dialogVisible1 = true;
    },
    make1(e) {
      this.form.did = this.templateSelection.did;
      this.form.id = this.templateSelection.id;
      this.form.regId = this.templateSelection.regId;
      this.form.registeredfeeAggregateAmount =
      this.templateSelection.registeredfeeAggregateAmount;
      this.form.schedulingId = this.templateSelection.schedulingId;
      this.form.schedulingSubsectionId =
      this.templateSelection.schedulingSubsectionId;
      this.form.schedulingWeekId = this.templateSelection.schedulingWeekId;
      if (e == 1) {
        //现在支付
        this.drawer = true;
      } else if (e == 5) {
        //稍后支付
        this.form.pay=0
        FristRegisterLastPay(this.form).then((re) => {
          if(re.code==200){
            open2(this, re.msg);
          }else{
            open4(this,re.msg)
          } 
        
        });
      }
      this.dialogVisible1 = false;
    },
    //付款成功回调函数
    paysuccess() {
         this.form.pay=1
         FristRegisterLastPay(this.form).then((re) => {
          if(re.code==200){
            this.drawer=false
            open2(this, re.msg);
          }else{
            open4(this,re.msg)
          } 
        
        });
    },
    // 表单重置
    Reset() {
      this.form.name = "";
      this.form.age = 18;
      this.form.sex = "";
      this.form.php = "";
      this.form.address = "";
      this.form.idcard = "";
      this.form.disabled = false;
    },
    //分页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
     //模糊查询病例
    selectBynameAndks(){
      getAllHistory({name:this.bl.name,depname:this.bl.ks}).then(re=>{
      this.historys=re.data
       })
    }
  },
  mounted() {
    getPatientList().then((re) => {
      this.patientlist = re.data;
    });
    getAllSchedulingByNow({did:'',rid:'',name:''}).then((re) => {
      this.schedlist = re.data;
    });
    //获取所有病例
    getAllHistory({name:'',depname:''}).then(re=>{
      this.historys=re.data
    })
  
  },
  watch:{
    'form.idcard'(){ 
      const reg = /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
        if(reg.test(this.form.idcard)){
           this.disbriday=true
           let year = this.form.idcard.substring(6,10)
           let month= this.form.idcard.substring(10,12)
           let day=this.form.idcard.substring(12,14)
           this.form.age=year+'-'+month+'-'+day
        }else{
            this.disbriday=false
        }
    },
    
  }
};
</script>

<style scoped>
*{
  font-weight: bold;
}
.mt{
  margin-top:20px
}
.selectall {
  width: 160px;
}
#charfull{
  color: rgb(187, 167, 167);
}
#charfull2{
  color: red;
}
.img {
  width: 350px;
  height: 400px;
  margin-top: 30px;
  margin-left: 60px;
}
.charfull{
  width: 200px;
}
#register{
box-shadow:  0px 0px 15px #98d3e7;
}


</style>
